<template>
  <view class="container" v-if="Object.keys(pageObj.contacts).length > 0">
    <!-- 顶部状态 -->
    <!-- <view class="status-section">
			<view class="status-section-piao" v-if="pageObj.ticketAmount > 0" @click="goTicket">
				<i class="iconfont icon-leimupinleifenleileibie" /> &nbsp;&nbsp; 查看票夹
			</view>

			<image v-if="statusFun(pageObj).text == '已取消'" src="@/static/img/cancel-test.png" class="status-icon">
			</image>
			<image v-else src="@/static/img/success.png" class="status-icon"></image>
			<view class="status-text">{{ statusFun(pageObj).text }}</view>
		</view> -->

    <!-- 商品信息 -->
    <view class="order-item">
      <!-- 订单标题和交易状态 -->
      <view class="order-header" @click.stop="goPage('/page_home/planDetail?id=' + pageObj.goods.id)">
        <view class="order-title">
          <i class="iconfont icon-ds-shop" />&nbsp;
          <view class="order-title-text">{{ pageObj.goods.name }}</view>
          <!-- 右箭头图标 -->
          <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
        </view>
        <text class="order-status" :style="{ color: statusFun(pageObj).color }">{{ statusFun(pageObj).text }}</text>
      </view>

      <view class="order-box" v-for="item, idx in pageObj.goods.selectedSpecificationGroups" :key="idx">

        <!-- 订单图片 -->
        <!-- <view class="order-image">
					<image :src="host + pageObj.goods.icon" mode="aspectFill" class="image"></image>
				</view> -->
        <view class="order-box-l">

          <view class="order-details">
            <text class="detail-text-title">{{ item.specificationCondition }}</text>
          </view>
          <!-- 订单详情规格 -->
          <view class="order-details" v-if="item.specificationItemGroup">
            <view class="product-title product-title-color over-list"
              v-for="group, index in item.specificationItemGroup" :key="idx">
              {{ group.name }}-{{ group.itemName }}
            </view>
          </view>
          <view class="order-details">
            <view class="detail-text-desc">{{ pageObj.goods.region }}</view>
          </view>
          <!-- 条件 -->
          <!-- <view class="order-details">
        				<view class="detail-text">{{item.specificationCondition}}</view>
        			</view> -->
          <!-- 7天无理由 -->
          <!-- <view
    						class="order-details order-more"
    						v-if="pageObj.goods.guarantees"
    					  >
    						<text
    						  class="detail-text-smallTitle"
    						  v-for="row,ix in pageObj.goods.guarantees"
    						>{{ row.name}}：{{ row.content}}</text>
    					  </view>
    					</view> -->
        </view>
        <!-- 价格、数量、运费 -->
        <view class="order-info">
          <view class="price"><text class="price-icon">￥</text> {{ item.currentUnitPrice / 100 }}
          </view>
          <view style="display: flex; align-items: center;">
            <!-- <text class="shipping">（含运费: {{ order.shipping }}）</text> -->
            <view class="status-section-piao" v-if="pageObj.ticketAmount > 0 && item.isTicket" @click.stop="goTicket">
              <i class="iconfont icon-leimupinleifenleileibie" /> &nbsp;&nbsp; 查看票夹
            </view>
            <view class="quantity">x {{ item.amount }}</view>
          </view>
        </view>
      </view>
      <!-- 出行人信息，支持多选 -->
      <view class="people " v-if="pageObj.contacts && pageObj.contacts.length > 0">
        <view class="people-name">
          <view class="people-name-title">
            联系人
          </view>
        </view>
        <view v-for="(item, index) in pageObj.contacts" :key="index">
          <view class="addresssli">
            <view class="addresssli-jian">
              <!-- <image class="addresssli-jian-img" src="@/static/img/jian.png" mode="widthFix"></image> -->
              <view class="checkbox">
                <!-- <view v-if="index==0" class="checkbox-icon">✔</view> -->
                {{ index + 1 }}
              </view>
              {{ index == 0 ? '主行人' : '随行人' }}
            </view>
            <view class="addressslicon">
              <view class="addressslicon-title">
                {{ item.realname }}
              </view>
              <view class="addressslicon-desc">
                手机号：{{ item.telephone }}
              </view>
              <view class="addressslicon-desc">
                证件ID：{{ item.IDNumber }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="card">
        <view class="card-box">
          <view class="card-box-l">
            订单编号
          </view>
          <view class="card-box-r">
            {{ pageObj.tradeNo }}
            <i style="margin-left: 5rpx;display: inline-block;" @click="$publicFun.copy({ title: pageObj.tradeNo })"
              class="iconfont icon-muban" />
          </view>
        </view>
        <view class="card-box">
          <view class="card-box-l">
            创建时间
          </view>
          <view class="card-box-r">
            {{ $publicFun.GetTime(pageObj.createTime) }}
          </view>
        </view>
        <view class="card-box">
          <view class="card-box-l">
            实付合计
          </view>
          <view class="card-box-r">
            ¥ {{ pageObj.price / 100 }}
          </view>
        </view>
        <view class="card-box">
          <view class="card-box-l">
            支付方式
          </view>
          <view class="card-box-r">
            微信支付
          </view>
        </view>

        <view class="card-box" v-if="pageObj.description">
          <view class="card-box-l">
            下单备注
          </view>
          <view class="card-box-r">
            {{ pageObj.description }}
          </view>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view class="footer">
        <view class="footer-btn">
          <view v-if="!pageObj.finished" style="display: flex;">
            <button v-if="(pageObj.refundStatus == -1 || pageObj.refundStatus == null) && pageObj.ticketStatus != 2"
              class="btn secondary" @click="payBackFun">申请退款</button>
            <!-- <button v-if="pageObj.refundStatus === 0" class="btn secondary" @click.stop="revokeFun(pageObj)">撤销</button> -->

            <button v-if="pageObj.refundStatus != 'null' && (pageObj.refundStatus === 0 || pageObj.refundStatus == 1)"
              class="btn secondary btn-class-border" @click="goPage('/page_wallet/orderList1')">售后退款</button>
          </view>

          <button class="btn primary btn-class"
            @click="goPage('/page_home/planDetail?id=' + pageObj.goods.id)">再来一单</button>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'
export default {
  name: 'payWait',
  components: {},
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      pageObj: {
        contacts: {},
      },
      id: '',
      TicketStr: [],
    }
  },
  watch: {},
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters(['login_status']),
  },
  async onLoad(option) {
    this.id = option.id
    await this.dictionary()
    this.init()
  },
  onReady() {
    this.$bus.$on('refresh', (e) => {
      this.init()
    })
  },
  methods: {
    async init() {
      let data = await this.$apiFun.getApi(this.$api.orderDetailApi, {
        payOrderId: this.id,
      })
      data.goods.selectedSpecificationGroups.forEach((item) => {
        item.specificationItemGroup.map((row) => {
          // 判断是否包含票务订单
          item.isTicket = this.haveTicketFun(row.name) ? true : false
        })
      })
      this.pageObj = data
    },
    // 票务字典
    async dictionary() {
      let data = await this.$apiFun.getApi(this.$api.configInfoApi, {
        itemKey: 'ticket_specification_matching_names',
      })
      this.TicketStr = JSON.parse(data.value)
    },
    haveTicketFun(name) {
      let isTicket = this.TicketStr.some(TicketStritem => name.includes(TicketStritem));
      return isTicket
    },
    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    goTicket() {
      uni.reLaunch({
        url: '/pages/uni_up',
      })
    },
    statusFun1(val) {
      // ticketStatus  出票状态(0:待出票 1:已出票 2:已完成)
      let text = ''
      switch (val) {
        case 0:
          text = '待出票'
          break
        case 1:
          text = '已出票'
          break
        case 2:
          text = '已完成'
          break
      }
      return text
    },
    statusFun(row) {
      /*
       * status 订单状态(0:待付款 1:待使用（已付款）)
       * refundStatus 订单状态(0:待退款 1:已取消（已退款）  -1:已驳回 )
       * finished true 订单已完成 
       */
      const {
        refundStatus,
        status,
        finished
      } = row
      let text = ''
      let color = '#ff5000'
      if (finished) {
        text = '已完成'
      } else {
        if (refundStatus == 1) {
          text = '已取消'
        } else {
          if (status == 0) {
            text = '待付款'
          } else if (status == 1) {
            text = '待使用'
          } else if (status == -1) {
            text = '交易失败'
          }
        }
      }

      return {
        text,
        color,
      }
    },
    // 撤销售后
    revokeFun(order) {
      uni.showModal({
        title: '撤销售后',
        content: '是否撤销当前订单？',
        success: async (res) => {
          if (res.confirm) {
            const data = await this.$apiFun.delApi(this.$api.cancelRefundApi, [order.id])
            if (data == 1) {
              uni.showToast({
                title: '订单撤销成功',
                icon: 'none'
              })
              setTimeout(() => {
                this.$bus.$emit('refresh')
                uni.navigateBack()
              }, 2000)
            }
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    // 申请退款
    payBackFun() {
      uni.navigateTo({
        url: '/page_wallet/payRefund?id=' + this.id,
      })
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.container {
  padding: 0 15rpx;
  box-sizing: border-box;
  background-color: #000000;
  min-height: 100vh;
  padding-bottom: 50rpx;
}

/* 顶部状态样式 */
.status-section {
  text-align: center;
  padding: 50rpx 0;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
  position: relative;


}

.status-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 36rpx;
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.status-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}

/* 退款信息样式 */
.info-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.info-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}

.info-value {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}

.arrow-icon {
  width: 10rpx;
  height: 10rpx;
  margin-left: 10rpx;
}

.order-item {
  // background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;

  .order-title-text {
    max-width: 400rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .iconfont {
    font-size: 40rpx;
    margin-right: 10rpx;
  }
}

.order-status {
  font-size: 28rpx;
}

.order-box {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  margin-bottom: 15rpx;
  // padding: 0 30rpx;
  // box-sizing: border-box;
  // background-color: rgba(255, 255, 255, 0.1);
  min-height: 160rpx;
}

.order-more {
  height: 80rpx;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.order-details {
  margin-bottom: 5rpx;

  .product-title {
    width: 100%;
    display: block;
    font-size: 26rpx;
    // width: 300rpx;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10rpx;
  }
}

.detail-text-l {}

.detail-text-smallTitle {
  font-size: 20rpx;
  line-height: 35rpx;
  margin-right: 10rpx;
}

.detail-text-title {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.detail-text-desc {
  font-size: 20rpx;
}

.detail-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

.order-info {
  height: 160rpx;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;

  .status-section-piao {
    height: 50rpx;
    padding: 0 20rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
    margin-right: 15rpx;
    color: rgba(255, 255, 255, 1);
    border: 1rpx solid rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    .iconfont {
      font-size: 28rpx;
    }
  }
}

.price {
  font-size: 26rpx;
  font-weight: bold;
  width: 100%;

  .price-icon {
    font-size: 20rpx;
  }
}

.quantity {
  color: #979797;
  width: 100%;
}

.shipping {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}

.order-image {
  display: flex;
  justify-content: flex-end;
  margin-right: 15rpx;
  width: 170rpx;
  height: 170rpx;

  .image {
    width: 170rpx;
    height: 170rpx;
    border-radius: 10rpx;
  }
}

.order-box-l {
  flex: 1;
}

.card {
  margin: 20rpx auto;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-box {
  // padding: 0 30rpx;
  // box-sizing: border-box;
  // background: rgba(255, 255, 255, 0.1);
  min-height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;

  .card-box-l {
    font-size: 26rpx;
    white-space: nowrap;
    min-width: 150rpx;
  }

  .card-box-r {
    color: rgba(255, 255, 255, 0.7);
    font-size: 25rpx;
  }
}

.goods-item {
  padding: 20rpx 0;

  &+.goods-item {
    // border-top: 2rpx solid #eee;
  }

  .goods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
  }

  .goods-info {
    flex: 1;
    margin-left: 24rpx;
  }

  .goods-title {
    font-size: 28rpx;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}



.price-lg {
  color: #e64340;
  font-size: 40rpx;
  font-weight: bold;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 1);
  padding: 20rpx;

  .footer1-box-r {
    color: rgba(255, 255, 255, 1);
    margin: 0 25rpx 30rpx 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    .product-price {
      font-size: 20rpx;
      color: #e64340;
      font-weight: bold;

      .plan-price-text {
        font-size: 40rpx;
        margin: 0 5rpx;
      }
    }
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;

    .btn {
      height: 72rpx;
      line-height: 72rpx;
      padding: 0 40rpx;
      border-radius: 36rpx;
      font-size: 28rpx;
      margin: 0 25rpx 0 0;

      &:after {
        border: 0;
      }

      &.secondary {
        background: #f5f5f5;
        color: #666;
      }

      &.btn-class-border {
        border: 1rpx solid #3b82f6;
        color: #fc3975;
      }

      &.primary {
        background: #e64340;
        color: white;
      }
    }
  }
}

// 置顶弹框
.like {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;

  .like-tittle {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    justify-content: space-between;
    display: flex;
    align-items: center;

    .like-tittle-text {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 1);
    }

    .like-tittle-img {
      width: 14rpx;
      height: 14rpx;
    }

    .iconfont {
      font-size: 40rpx;
    }
  }

  .like-desc {
    font-size: 25rpx;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;

    .like-desc-box {
      display: flex;
      align-items: flex-start;
      padding: 40rpx 0;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e6e6e6;

      .like-desc-box-t {
        width: 180rpx;
        color: rgba(255, 255, 255, 1);
      }

      .like-desc-box-b {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

// 辅助样式
.mt-10 {
  margin-top: 10rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.ml-30 {
  margin-left: 30rpx;
}

.fs-28 {
  font-size: 28rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-40 {
  font-size: 40rpx;
}

.color-primary {
  color: #07c160;
}

.color-grey {
  color: #999;
}

.color-dark {
  color: rgba(255, 255, 255, 1);
}

.bg-primary {
  background: #07c160;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.people {
  margin: 20rpx auto 20rpx;
  // box-sizing: border-box;
  // padding: 10rpx 30rpx 15rpx;
  // border-radius: 6rpx;
  // background: rgba(255, 255, 255, 0.1);

  /* 商家名称 */
  .people-name {
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .people-name-title {
      max-width: 400rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
    }

    .people-name-desc {
      font-size: 22rpx;
    }
  }

  .scroll-container {
    white-space: nowrap;
    /* 防止换行 */
    width: 100%;
    padding: 10rpx 0 0rpx;

    .product-list {
      display: inline-flex;
      /* 横向排列 */
    }

    .product-item {
      min-width: 100rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 15rpx;
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 0 15rpx;
      border-radius: 6rpx;
      border: 2rpx solid rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .spec-text-sum {
        position: absolute;
        top: -10rpx;
        right: -5rpx;
        padding: 1rpx 8rpx;
        border-radius: 15rpx;
      }
    }

    .product-item-active {
      border-radius: 6rpx;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(255, 255, 255, 1);
      color: #000000;
    }
  }

  .people-desc {
    margin-top: 15rpx;
    font-size: 22rpx;
    color: #3b82f6;
  }

  .addresssli {
    width: 100%;
    overflow: hidden;
    // background-color: rgba(255, 255, 255, .1);
    // border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
    padding: 30rpx 0;
    display: flex;
    align-items: center;

    .addresssli-jian {
      height: 55rpx;
      margin-right: 40rpx;
      display: flex;
      align-items: center;

      /* 选择框 */
      .checkbox {
        width: 28rpx;
        height: 28rpx;
        border: 2rpx solid #ffffff;
        border-radius: 50%;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
      }

      /* 选中状态的复选框 */
      .checkbox-icon {
        font-size: 24rpx;
        color: #fff;
        background-color: #ff5000;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .addressslicon {
      .addressslicon-title {
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }

      .addressslicon-desc {
        margin-bottom: 5rpx;
        font-size: 26rpx;
      }
    }
  }
}
</style>